<template>
  <div class="app-container home">
    <query-panel
      :form-data="queryParams"
      @handleQuery="handleQuery"
      :exportSrr="true"
      @exportHand="exportHand"
      label-width="100px"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="节点名称：" prop="nodeName">
            <el-input v-model="queryParams.nodeName" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="编码：" prop="code" label-width="60px">
            <el-input v-model="queryParams.code" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>
    </query-panel>
    <table-panel
      ref="tablePanel"
      align="left"
      table-data="/maintain/maintain/nodeMg/list"
      :queryParams="queryParams"
      :isTree="true"
      row-key="nodeId"
      :pagination="false"
      :isExpandCollapse="true"
      :columns="columns"
    >
      <template slot="tableTop">
        <el-button
          class="tableAdd table-add-btn"
          type="primary"
          plain
          size="mini"
          @click="onAdd"
        >
          <svg-icon icon-class="add_icon" style="width: 18px; height: 16px" />
          新增
        </el-button>
      </template>
      <template #displayType="{ row }">
        <span>{{ row.displayType == "1" ? "左侧菜单" : "右侧列表" }}</span>
      </template>
      <template #operate="{ row }">
        <el-button
          size="mini"
          type="text"
          class="ordinary-btn"
          @click="onOperate('编辑', row)"
          ><svg-icon
            icon-class="table-column-edit"
            style="width: 16px; height: 16px"
          />
          编辑
        </el-button>
        <el-button
          size="mini"
          type="text"
          class="ordinary-btn"
          @click="onOperate('删除', row)"
          :disabled="Boolean(row.children) === true && row.children.length > 0"
          ><svg-icon
            icon-class="table-column-delete"
            style="width: 16px; height: 16px"
          />
          删除
        </el-button>
      </template>
    </table-panel>
    <el-dialog
      :title="title"
      :visible.sync="open"
      v-if="open"
      width="458px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="110px"
        size="mini"
      >
        <el-form-item v-show="title !== '新增节点'" label="编码：" required>
          {{ form.code }}
        </el-form-item>
        <el-form-item label="所属节点：" prop="parentId">
          <treeselect
            v-model="form.parentId"
            :options="menuOptions"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="请选择所属节点"
          />
        </el-form-item>
        <el-form-item label="中文名称：" prop="nodeName">
          <el-input v-model="form.nodeName" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="英文名称：" prop="nodeNameEn">
          <el-input v-model="form.nodeNameEn" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="显示排序：" prop="orderNum">
          <el-input v-model="form.orderNum" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="显示形式：" prop="displayType">
          <el-radio-group v-model="form.displayType" @change="changeRadio">
            <el-radio
              v-for="dict in displaytype"
              :key="dict.value"
              :label="dict.value"
              >{{ dict.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="">
          <image-upload
            list-type="picture-card"
            v-if="isImg"
            :is-show-tip="false"
            @input="handleImg"
            :value="imgData"
          >
          </image-upload>
        </el-form-item>
        <!-- <el-form-item label="语言：" prop="languages">
          <el-radio-group v-model="form.languages" @change="handleNodeLlst">
            <el-radio
              v-for="dict in languages"
              :key="dict.value"
              :label="dict.value"
              >{{ dict.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="产品：" prop="productFlag">
          <el-radio-group v-model="form.productFlag" @change="handleNodeLlst">
            <el-radio
              v-for="dict in productFlag"
              :key="dict.value"
              :label="dict.value"
              >{{ dict.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="平台："
          prop="productPlatform"
          v-if="form.productFlag == 1"
        >
          <el-select
            v-model="form.productPlatform"
            style="width: 100%"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="dict in dict.type.product_platform"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="制式："
          prop="productFormat"
          v-if="form.productFlag == 1"
        >
          <el-select
            v-model="form.productFormat"
            style="width: 100%"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="dict in dict.type.product_format"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="运输能力："
          prop="productVolume"
          v-if="form.productFlag == 1"
        >
          <el-select
            v-model="form.productVolume"
            style="width: 100%"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="dict in dict.type.product_volume"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="mini"
          class="tableAdd"
          @click="submitForm"
          >确定</el-button
        >
        <el-button
          class="dialogCancel"
          type="primary"
          size="mini"
          @click="cancel"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import QueryPanel from "@/components/QueryPanel/index.vue";
import ImageUpload from "@/components/ImageUpload/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { detailsImg } from "@/api/file/index";
import {
  addNode,
  serachNodeList,
  deleteNodeList,
  editNode,
  mountPage,
} from "@/api/nodeManage/node";
export default {
  name: "nodeIndex",
  components: {
    TablePanel,
    QueryPanel,
    ImageUpload,
    Treeselect,
  },
  dicts: ["product_platform", "product_format", "product_volume"],
  data() {
    return {
      queryParams: {
        nodeName: "",
        code: "",
        moduleType: 2, // 模板类型
        languages: ""
      },
      columns: [
        {
          field: "nodeName",
          label: "节点名称",
        },
        {
          field: "orderNum",
          label: "排序",
        },
        {
          field: "pageName",
          label: "链接页面",
        },
        {
          field: "createTime",
          label: "创建时间",
          type: "date",
        },
        {
          field: "displayType",
          label: "显示形式",
          slots: { default: "displayType" },
        },
        {
          label: "操作",
          width: "200px",
          type: "custom",
          slots: { default: "operate" },
        },
      ],
      open: false,
      title: "新增节点",
      displaytype: [
        {
          value: "1",
          label: "左侧菜单",
        },
        {
          value: "2",
          label: "右侧列表",
        },
      ],
      languages: [
        {
          value: "1",
          label: "中文",
        },
        {
          value: "2",
          label: "英文",
        },
      ],
      productFlag: [
        {
          value: "1",
          label: "是"
        },
        {
          value: "0",
          label: "否"
        }
      ],
      form: {
        moduleType: 2, // 模板类型
        code: "",
        parentId: undefined,
        nodeName: "",
        orderNum: "",
        nodeNameEn: "",
        displayType: "1",
        languages: "1",
        productFlag: "0",
        productPlatform: "",
        productFormat: "",
        productVolume: "",
      },
      isImg: false,
      menuOptions: [],
      rules: {
        parentId: [
          { required: true, message: "上级节点不能为空", trigger: "change" },
        ],
        nodeName: [
          { required: true, message: "节点名称不能为空", trigger: "blur" },
        ],
        orderNum: [
          { required: true, message: "显示排序不能为空", trigger: "blur" },
        ],
        displayType: [
          { required: true, message: "显示形式不能为空", trigger: "change" },
        ],
        // languages: [
        //   { required: true, message: "语言不能为空", trigger: "change" },
        // ],
        productPlatform: [
          { required: true, message: "平台不能为空", trigger: "change" },
        ],
        productFormat: [
          { required: true, message: "制式不能为空", trigger: "change" },
        ],
        productVolume: [
          { required: true, message: "运输能力不能为空", trigger: "change" },
        ]
      },
      imgData: [],
      nodeParams: {
        moduleType: 2,
        languages: 1
      }
    };
  },
  mounted() { },
  methods: {
    // 查询
    handleQuery() {
      this.$refs.tablePanel.getTable();
    },
    // 新增
    onAdd() {
      this.nodeParams.languages = 1;
      this.imgData = [];
      this.form = {
        moduleType: 2, // 模板类型
        code: "",
        parentId: undefined,
        nodeName: "",
        orderNum: "",
        displayType: "1",
        languages: "1",
        productFlag: "0",
        productPlatform: "",
        productFormat: "",
        productVolume: ""
      };
      this.title = "新增节点";
      this.isImg = false;
      this.getTreeselect();
      this.open = true;
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
    },
    handleImg(str) {
      if (typeof res === "boolean") {
        this.form.fileId = "";
      } else {
        this.form.fileId = str.data.fileId;
      }
    },
    cancel() {
      this.open = false;
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.title === "新增节点") {
            addNode(this.form)
              .then((res) => {
                this.$message.success("操作成功！");
                this.open = false;
                this.$refs.tablePanel.getTable();
              })
              .catch((err) => {
                this.$message.error("操作失败！");
              });
          } else {
            editNode(this.form)
              .then((res) => {
                this.$message.success("操作成功！");
                this.open = false;
                this.$refs.tablePanel.getTable();
              })
              .catch((err) => {
                this.$message.error("操作失败！");
              });
          }
        }
      });
    },
    onOperate(type, row) {
      this.imgData = [];
      if (type === "编辑") {
        this.title = "编辑";
        for (let d in this.form) {
          this.form[d] = row[d];
        }
        this.form.nodeId = row.nodeId;
        this.isImg = row.displayType === "2" ? true : false;
        if (row.displayType === "2") {
          detailsImg({ fileId: row.fileId }).then((response) => {
            this.imgData.push({
              url: response.data.url,
              name: response.data.name,
            });
          });
        }
        this.getTreeselect();
        this.open = true;
        if (this.$refs.form) {
          this.$refs.form.resetFields();
        }
      } else if (type === "删除") {
        mountPage({ nodeId: row.nodeId }).then((res) => {
          this.$confirm(
            res.data > 0
              ? "有页面挂接在此节点上，确认是否删除此节点"
              : "确认是否删除此节点？"
          ).then(() => {
            deleteNodeList(row.nodeId)
              .then((res) => {
                this.$refs.tablePanel.getTable();
                this.$message.success("操作成功！");
              })
              .catch((err) => {
                this.$message.error("操作失败！");
              });
          });
        });
      }
    },
    // 显示形式change
    changeRadio(event) {
      if (event === "2") {
        this.isImg = true;
      } else {
        this.isImg = false;
      }
    },
    handleNodeLlst(data) {
      this.nodeParams.languages = data;
      this.getTreeselect();
    },
    getTreeselect() {
      serachNodeList(this.nodeParams).then((res) => {
        this.menuOptions = res.rows;
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children === null) {
        delete node.children;
      }
      return {
        id: node.nodeId,
        label: node.nodeName,
        children: node.children,
      };
    },
    // 数据导出
    exportHand() {
      this.download('maintain/maintain/nodeMg/export', {
        ...this.queryParams
      }, `job_${new Date().getTime()}.xlsx`)
    }
  },
};
</script>

<style scoped lang="scss">
.cell {
  span {
    font-size: 16px;
    font-weight: 400;
  }
}
.ordinary-btn {
  width: 80px;
  height: 32px;
  border: 1px solid #dcdcdc;
  font-size: 16px;
  span {
    color: #333333e6;
  }
}
</style>
